import classNames from 'classnames'
import './index.scss'
import {useDispatch, useSelector} from "react-redux";
import {useEffect} from "react";
import {changeActiveIndex, fetchFoodsList} from "../../store/modules/takeaway";

const Menu = () => {




  // 出发action执行
  // useDispatch
  const dispatch = useDispatch();
  useEffect(()=>{
    dispatch(fetchFoodsList())
  },[dispatch])

  // 获取store action
  const {foodsList,activeIndex} = useSelector(state=>state.foodsReducer);
  const menus = foodsList.map(item => ({ tag: item.tag, name: item.name }))

  return (
    <nav className="list-menu">
      {/* 添加active类名会变成激活状态 */}
      {menus.map((item, index) => {
        return (
          <div
              onClick={()=>dispatch(changeActiveIndex(index))}
            key={item.tag}
            className={classNames(
              'list-menu-item',
                {active:index === activeIndex}
            )}
          >
            {item.name}
          </div>
        )
      })}
    </nav>
  )
}

export default Menu
